<template>
  <div class="transfer_page">
    <div class="transfer_type_box mt">
      <van-cell is-link title="转账类型"
                @click="selectItem('type')">
        <template #default>{{transferType[type].name}}</template>
      </van-cell>
      <van-cell is-link v-if="parseInt(type) === 1" title="到账时间"
                :value="form.arrival" @click="selectItem('time')" />
    </div>
    <div class="transfer_payment_box">
      <van-cell is-link title="付款账号" @click="showPayerPopup">
        <template #default>{{form.payerAcNo | carNoEnCode}}</template>
      </van-cell>

      <van-cell title="" class="balance">
        <template #default>
          <span v-if="currency" class="currency">{{currencyMap[currency]}}</span>
          余额：{{ payerAcBalance |currency('')}}元
        </template>
      </van-cell>
    </div>
    <div class="receive_payment_box">
      <van-field v-model="form.payeeAcNo" label="收款账号" placeholder="请输入收款账号"
                 @click-right-icon="openModal">
        <template #right-icon><span class="icon contactBook"></span></template>
      </van-field>
      <van-field v-model="form.payeeName" label="收款人名称" placeholder="请输入收款人名称" />
      <van-field v-if="parseInt(type) === 1" readonly label="是否向个人转账" >
        <template #right-icon>
          <van-switch v-model="form.isB2P" size="24" />
        </template>
      </van-field>

      <van-field v-if="parseInt(type) === 1" v-model="form.bankName"
                 readonly label="开户行名称"
                 @click-right-icon="showBankList = true">
        <template #right-icon><span class="icon bank"></span></template>
      </van-field>
    </div>
    <div class="transfer_payee_box">
      <van-cell title="转账金额">
        <template #label>
          <div class="amount_box">
            <span class="currency">¥</span>
            <van-field class="amount_input" v-model="form.amount" placeholder="请输入转账金额" />
          </div>
        </template>
      </van-cell>
      <van-field label="大写金额" input-align="right">
        <template #input><span>{{form.amount | convertToChinaNum}}</span></template>
      </van-field>
      <van-cell is-link title="转账用途" :value="form.use" @click="selectItem('use')" />
      <van-field label="备注" placeholder="请输入备注" rows="1" type="textarea"
                 autosize v-model="form.remark" />
    </div>
    <div class="other_box mt">
      <van-field readonly label="是否预约" >
        <template #right-icon>
          <van-switch active-value="0" inactive-value="1" v-model="form.isAppointment" size="24" />
        </template>
      </van-field>
      <van-cell is-link title="预约日期"
                v-if="!parseInt(form.isAppointment)" :value="date" @click="showCalendar = true" />
      <van-field readonly label="是否添加收款人名册" >
        <template #right-icon>
          <van-switch active-value="0" inactive-value="1" v-model="form.isAddRegister" size="24" />
        </template>
      </van-field>
      <!--<van-field v-model="form.arrival" label="到账方式" placeholder="请选择" readonly>-->
        <!--<template #button>-->
          <!--<van-icon name="arrow" size="16" @click="test" />-->
        <!--</template>-->
      <!--</van-field>-->
    </div>
    <div class="next_box">
      <van-button type="info" @click="next" block>提交</van-button>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <van-popup v-model="showPayee" position="right"
               :style="{ width: '55%', height: '100%' }">
      <van-cell v-for="(item, index) in payeeList" :key="index" center is-link
                :title="item.name" :label="item.account"
                @click="checkPayee(item)" />
    </van-popup>

    <van-popup class="payer_account_list_popup"
               v-model="showpayer"
               position="bottom"
               :style="{ height: '24%' }"
    >
      <van-picker show-toolbar value-key="acName"
                  :loading="isLoading"
                  :columns="columns"
                  visible-item-count="3"
                  @change="onPayerChange" />
    </van-popup>

    <van-popup class="confirm_popup"
      v-model="showConfirm"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '45%' }"
    >
      <div class="confirm_box">
        <div class="confirm_title">转账提示</div>
        <div class="confirm_content">
          <van-cell center title="转账金额" :value="form.amount" />
          <van-cell center title="手续费" value="0" />
          <van-cell center title="收款账号" :value="form.payeeAcNo" />
          <van-cell center title="收款人户名" :value="form.payeeName" />
          <div class="transfer_box">
            <van-button round type="info" @click="transfer" block>确认转账</van-button>
          </div>
        </div>
      </div>
    </van-popup>

    <van-calendar color="#0173FF" v-model="showCalendar" @confirm="onConfirm" />
    <bank-list :is-show.sync="showBankList" @select="checkBank" ></bank-list>
  </div>
</template>

<script>
import {
  NavBar,
  Field,
  Icon,
  Button,
  ActionSheet,
  Cell,
  Switch,
  Popup,
  Tag,
  Calendar,
  Picker,
  Toast,
} from 'vant';
import { mapActions } from 'vuex';
import Constants from '@/libs/constant';
import {
  queryAccountsBanlance,
  queryUsableAmount,
} from '@/libs/api';
import BankList from './component/BankList.vue';

export default {
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet,
    [Cell.name]: Cell,
    [Switch.name]: Switch,
    [Popup.name]: Popup,
    [Tag.name]: Tag,
    [Calendar.name]: Calendar,
    [Picker.name]: Picker,
    BankList,
    [Toast.name]: Toast,
  },
  data() {
    return {
      transferType: Constants.transferType,
      currencyMap: Constants.currencyMap,
      value: '',
      show: false,
      showpayer: false, // 付款人
      payerAcBalance: 0,
      currency: '',
      isLoading: false,
      columns: [],
      showPayee: false, // 收款人
      showCalendar: false,
      date: '',
      showConfirm: false,
      checkItem: '',
      type: 0,
      showBankList: false,
      showPayeeList: false,
      form: {
        account: '0',
        amount: '',
        type: '',
        arrival: '',
        payeeAcNo: '',
        payeeName: '',
        bankName: '',
        remark: '',
        use: '',
        isB2P: 0,
        isAppointment: 1,
        isAddRegister: 1,
        serviceCharge: 0,
        accountingDate: 'REAL',
        appointmentDate: '',
        openDeptId: '',
        openDeptName: '',
      },
      actions: [],
      accountList: [{ name: '101260001039492062' }, { name: '101260001039492063' }],
      arrivalTime: [{ name: '实时到账', value: 'REAL' }, { name: '预计十分钟到账', value: 'NORM' }],
      reserveItem: [{ name: '是', value: '01' }, { name: '否', value: '02' }],
      payeeList: [
        {
          name: '测试',
          account: '0145797291120100078628',
          id: '100001'
        },
        {
          name: '江苏陆龙毛衫有限公司',
          account: '0145797291120100078628',
          id: '100001'
        }
      ],
      useItems: [
        { name: '贷款', value: '01' }, { name: '转账', value: '02' }
      ],
      limitAmt: '0',
      limitTimes: '0',
    };
  },
  methods: {
    ...mapActions(['saveFormData']),
    showPayerPopup() {
      this.qureyAccountInfo();
      this.showpayer = true;
    },
    onPayerChange(picker, values) {
      console.log(values);
      this.form.payerAcNo = values.acNo;
      this.form.payerName = values.acName;
      this.payerAcBalance = values.currentBalance;
      this.currency = values.currency;
      this.currency = values.acName;
    },
    // queryAccounts() {},
    selectItem(item) {
      console.log(Constants.transferType);
      console.log(Constants.currencyMap);
      this.checkItem = item;
      this.show = true;
      const times = [{ name: '预计十分钟到账', value: '01' }, { name: '实时到账', value: '02' }];
      if (item === 'type') {
        this.actions = Constants.transferType;
      } else if (item === 'time') {
        this.actions = times;
      } else if (item === 'use') {
        this.actions = this.useItems;
      }
    },
    onSelect(item) {
      // console.log(item, this.checkItem);
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      if (this.checkItem === 'type') {
        this.type = item.value;
        this.form.type = item.value;
      } else if (this.checkItem === 'time') {
        this.form.arrival = item.name;
      } else if (this.checkItem === 'use') {
        this.form.use = item.name;
      }
    },
    openModal() {
      this.showPayee = true;
    },
    checkPayee(payee) {
      this.showPayee = false;
      this.form.payeeAcNo = payee.account;
      this.form.payeeName = payee.name;
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showCalendar = false;
      this.date = this.formatDate(date);
    },
    checkBank(bankInfo) {
      console.log(bankInfo);
      this.showBankList = false;
      this.form.bankName = bankInfo.name;
      this.form.openDeptId = bankInfo.val;
      this.form.openDeptName = bankInfo.name;
    },
    next() {
      // this.showConfirm = true;
      this.queryAccountUsableAmount(this.form.payerAcNo);
    },
    checkInfo() {
      if (this.limitTimes < '1') {
        Toast('您的当日转账笔数达到上限');
        return;
      }
      if (this.limitAmt <= '0') {
        Toast('您的当日转账金额达到上限');
        return;
      }
      console.log(this.form);
      if (this.form.isB2P) {
        this.form.isB2P = 1;
      } else {
        this.form.isB2P = 0;
      }
      this.saveFormData({
        ...this.form,
        type: this.type,
        appointmentDate: this.date
      });
      this.$router.push({ path: `/transferConfirm/${this.type}` });
    },
    transfer() {
      console.log(this.form);
    },
    // 账户余额查询
    qureyAccountInfo() {
      console.log('begin qureyAccountInfo');
      const qryParam = {};
      qryParam.cstNo = this.$store.state.loginUser.cichno;
      qryParam.hostNo = this.$store.state.loginUser.cino;
      qryParam.operNo = this.$store.state.loginUser.userId;
      qryParam.serviceName = 'BASIC_Q_queryAccountsBanlance';
      qryParam.pageIndex = 1;
      qryParam.pageNum = 20;
      queryAccountsBanlance(this, qryParam).then((res) => {
        if (res.retCode === 'CIP0000000') {
          if (res.acNAmouns && res.acNAmouns.length) {
            this.accountList = res.acNAmouns;
            this.columns = res.acNAmouns;
          }
          console.log('*******账户信息*******');
          console.log('**************');
        }
      });
    },
    // 账户限额查询
    queryAccountUsableAmount(acc) {
      console.log('begin queryAccountUsableAmount');
      console.log(acc);
      const qryParam = {};
      qryParam.cstNo = this.$store.state.loginUser.cichno;
      qryParam.hostNo = this.$store.state.loginUser.cino;
      qryParam.operNo = this.$store.state.loginUser.userId;
      qryParam.serviceName = 'XE_Q_usableAmountQuery';
      qryParam.accno = acc;
      queryUsableAmount(this, qryParam).then((res) => {
        if (res.retCode === 'CIP0000000') {
          console.log('*******限额信息*******');
          console.log(res);
          console.log('**************');
          this.limitAmt = res.dayUSAmount;
          this.limitTimes = res.dayUSCount;
          this.checkInfo();
        }
      });
    },
  },
  created() {
    console.log(Constants.transferType);
    if (this.$store.state.formData && this.$store.state.formData.type) {
      this.form = { ...this.$store.state.formData };
      // this.type = Constants.transferType[this.form.type].name;
      console.log(this.$store.state.formData);
    }
    console.log('*******账户信息*******');
  },
  mounted() {
    // this.form.account = this.accountList[0].name;
    // this.form.type = this.transferMethod[0].name;
    // this.form.arrival = this.arrivalTime[0].name;
    // this.form.isReserve = this.reserveItem[0].name;
    // this.form.use = this.reserveItem[0].name;
  }
};
</script>

<style lang="less">
.transfer_page{
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  .van-cell{
    font-size: 15/16rem;
  }
  .van-cell__value{
    color: #333;
  }
  .icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
    background-size: 1.25rem 1.25rem;
    background-repeat: no-repeat;
  }
  .transfer_type_box{
    /*padding-top: 0.5rem;*/
  }
  .receive_payment_box{
    padding-top: 0.5rem;
    .contactBook {
      background-image: url('../../assets/img/page/contactBook@2x.png');
    }
    .bank {
      background-image: url('../../assets/img/page/bank@2x.png');
    }
    .van-field__label{
      width: 7rem;
    }
  }
  .transfer_payment_box{
    padding-top: 1vh;
    .balance .van-cell__value{
      color: #223968;
      flex-grow: 8;
    }
    .currency{
      background: rgba(#0173FF, 0.1);
      border-radius: 4px;
      color: #0173FF;
      font-size: 0.75rem;
      line-height: 1rem;
      padding: 0.188rem;
    }
  }
  .transfer_payee_box{
    padding-top: 0.5rem;
    .amount_box{
      font-size: 1.5rem;
      color: #223968;
      padding-top: 0.313rem;
    }
    .amount_input{
      width: 90%;
      text-align: left;
      display: inline-flex;
      padding-left: 0.5rem;
      border: none;
      font-size: 1.2rem;
      line-height: 1.2rem;
      .van-field__control{
        text-align: left;
      }
    }
  }
  .other_box {
    .van-field__label{
      width: 8.5rem;
    }
  }
  .next_box{
    padding: 0.8rem;
  }
  .van-cell__title{
    color: #223968;
  }
  .van-field__label{
    width: 6.5rem;
    color: #223968;
  }
  .van-field__control{
    text-align: right;
    padding: 1PX 2PX;
  }
  .confirm_popup{
    .confirm_box{
      height: 100%;
      .confirm_title{
        width: 100%;
        height: 3.2rem;
        line-height: 3.2rem;
        text-align: center;
        background-color: #459ED8;
        color: white;
      }
      .confirm_content{
        background-color: #efefef;
        .transfer_box{
          padding: 1rem 3rem;
        }
      }
    }
  }
}
</style>
